import { defineComponent } from "vue";
import { Link } from "@element-plus/icons-vue";
import { diagnose } from "@/api/modules/iot/device";
import { ElMessageBox } from "element-plus";
import { MessageType } from "@/enums/messageEnum";
import { showMsg } from "@/utils/util";
export default defineComponent({
	props: {
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: [],
	setup(props, { expose }) {
		watch(
			() => props.detail,
			() => {
				formData.value = props.detail.profile.config;
				let str = props.detail.profile.config.param.option;
				if (str && str.split(",").length) {
					option.value.baud = str.split(",")[0];
					option.value.checkBit = str.split(",")[1];
				}
				let port = props.detail.profile.config.connect.port;
				if (props.detail.profile.config.connect.type == "ethernet" && port && port.split(":").length) {
					connectPort.value.ip = port.split(":")[0];
					connectPort.value.port = port.split(":")[1];
					rules.value.connect = {
						port: [
							{ required: true, message: "请输入IP地址", trigger: "blur" },
							{ validator: validateIP, trigger: "blur" }
						]
					};
				}
			}
		);
		onMounted(() => {
			if (props.detail?.profile) {
				formData.value = props.detail.profile.config;
				let str = props.detail.profile.config.param.option;
				if (str && str.split(",").length) {
					option.value.baud = str.split(",")[0];
					option.value.checkBit = str.split(",")[1];
				}
				let port = props.detail.profile.config.connect.port;
				if (props.detail.profile.config.connect.type == "ethernet" && port && port.split(":").length) {
					connectPort.value.ip = port.split(":")[0];
					connectPort.value.port = port.split(":")[1];
					rules.value.connect = {
						port: [
							{ required: true, message: "请输入IP地址", trigger: "blur" },
							{ validator: validateIP, trigger: "blur" }
						]
					};
				}
			}
		});
		const formData = ref({
			connect: { type: "tcp", port: "0.0.0.0" },
			proto: "modbusTCP",
			period: 1000,
			param: { addr: "1", inter: 50, timeout: 300, bshort: "BA", bint: "CDAB", bfloat: "ABCD", option: "9600,8N1" },
			upload: { mode: 2, period: 60 }
		});
		const option = ref({ baud: "9600", checkBit: "8N1" });
		const connectPort = ref({ ip: "", port: "" });
		// 定义验证规则
		const validateIP = (rule, value, callback) => {
			// if (!value) {
			// 	return callback(new Error("IP地址不能为空"));
			// }
			// 正则表达式验证IP地址
			const reg =
				/^(((25[0-5]|2[0-4]d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))\:([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
			if (!reg.test(value)) {
				callback(new Error("请输入正确的IP地址"));
			} else {
				callback();
			}
		};
		const rules = ref<any>({
			connect: {
				port: [{ required: true, message: "请输入地址", trigger: "blur" }]
			},
			param: { addr: [{ required: true, message: "请输入从机地址", trigger: "blur" }] }
		});
		const formRef = ref();
		const submit = async () => {
			if (formData.value.connect.type == "ethernet") {
				formData.value.connect.port = `${connectPort.value.ip}:${connectPort.value.port}`;
			}
			return formRef.value.validate();
		};
		const diagnosis = async () => {
			if (!formData.value.connect.port) return showMsg("请输入地址", MessageType.error);
			let { result } = await diagnose({ type: formData.value.connect.type, port: formData.value.connect.port });
			ElMessageBox.alert(result, "诊断结果", {
				// if you want to disable its autofocus
				// autofocus: false,
				confirmButtonText: "OK",
				callback: () => {}
			});
		};
		expose({ formData, submit });
		return () => {
			return (
				<div>
					<div class="flex items-center m-5">
						<div class="w-[100px] font-bold ml-10">连接配置</div>
						<el-form
							class="flex-1 grid grid-cols-4 gap-4"
							inline
							label-width="105px"
							rules={rules.value}
							model={formData.value}
							ref={formRef}
						>
							<el-form-item label="从机地址" prop="param.addr">
								<el-input v-model={formData.value.param.addr} />
							</el-form-item>
							<el-form-item label="通讯方式">
								<el-select
									v-model={formData.value.connect.type}
									onChange={e => {
										formRef.value.resetFields();
										formData.value.connect.port = "";
										formData.value.proto = e == "ethernet" ? "modbusTCP" : "modbusRTU";
										if (e == "ethernet") {
											connectPort.value = { ip: "", port: "" };
											rules.value.connect = {
												port: [
													{ required: true, message: "请输入地址", trigger: "blur" },
													{ validator: validateIP, trigger: "blur" }
												]
											};
										} else {
											rules.value.connect = {
												port: [{ required: true, message: "请输入地址", trigger: "blur" }]
											};
										}
									}}
								>
									<el-option label="TCP客户端" value="ethernet" />
									<el-option label="TCP服务端" value="tcp" />
									<el-option label="串口" value="com" />
								</el-select>
							</el-form-item>
							<el-form-item label="子协议">
								<el-input v-model={formData.value.proto} disabled />
							</el-form-item>

							{formData.value.connect.type == "com" ? (
								<>
									<el-form-item label="波特率">
										<el-select
											v-model={option.value.baud}
											onChange={e => {
												formData.value.param.option = `${e},${option.value.checkBit}`;
											}}
										>
											<el-option label="110" value={110} />
											<el-option label="300" value={300} />
											<el-option label="600" value={600} />
											<el-option label="1200" value={1200} />
											<el-option label="2400" value={2400} />
											<el-option label="4800" value={4800} />
											<el-option label="9600" value={9600} />
											<el-option label="14400" value={14400} />
											<el-option label="19200" value={19200} />
											<el-option label="38400" value={38400} />
											<el-option label="56000" value={56000} />
											<el-option label="57600" value={57600} />
											<el-option label="76800" value={76800} />
											<el-option label="115200" value={115200} />
											<el-option label="187500" value={187500} />
										</el-select>
									</el-form-item>
									<el-form-item label="校验位">
										<el-select
											v-model={option.value.checkBit}
											onChange={e => {
												formData.value.param.option = `${option.value.baud},${e}`;
											}}
										>
											<el-option label="8N1" value="8N1" />
											<el-option label="8N2" value="8N2" />
											<el-option label="8O1" value="8O1" />
											<el-option label="8O2" value="8O2" />
											<el-option label="8E1" value="8E1" />
											<el-option label="8E2" value="8E2" />
											<el-option label="7N1" value="7N1" />
											<el-option label="7N2" value="7N2" />
											<el-option label="7O1" value="7O1" />
											<el-option label="7O2" value="7O2" />
											<el-option label="7E1" value="7E1" />
											<el-option label="7E2" value="7E2" />
										</el-select>
									</el-form-item>
								</>
							) : (
								""
							)}
							{formData.value.connect.type == "tcp" ? (
								<el-form-item label="监听端口" prop="connect.port" required>
									<div class="flex">
										<el-input v-model={formData.value.connect.port} />
										<el-link type="primary" class="w-[60px]" underline={false} icon={Link} onClick={diagnosis}>
											诊断
										</el-link>
									</div>
								</el-form-item>
							) : formData.value.connect.type == "com" ? (
								<el-form-item label="地址" prop="connect.port" required>
									<div class="flex">
										<el-input v-model={formData.value.connect.port} />
										<el-link type="primary" class="w-[60px]" underline={false} icon={Link} onClick={diagnosis}>
											诊断
										</el-link>
									</div>
								</el-form-item>
							) : formData.value.connect.type == "ethernet" ? (
								<el-form-item label="地址" prop="connect.port" required class="grid grid-cols-subgrid col-span-3">
									<div class="flex">
										<el-input
											style="width: 215px"
											v-model={connectPort.value.ip}
											onInput={e => {
												formData.value.connect.port = `${e}:${connectPort.value.port}`;
											}}
										/>
										<div class="ml-1 mr-1">:</div>
										<el-input
											style="width: 100px"
											v-model={connectPort.value.port}
											onInput={e => {
												formData.value.connect.port = `${connectPort.value.ip}:${e}`;
											}}
										/>
										<el-link type="primary" class="w-[60px]" underline={false} icon={Link} onClick={diagnosis}>
											诊断
										</el-link>
									</div>
								</el-form-item>
							) : (
								""
							)}
						</el-form>
					</div>
					<div class="flex items-center m-5">
						<div class="w-[100px] font-bold ml-10">采集配置</div>
						<el-form class="flex-1  grid grid-cols-4 gap-4" inline label-width="105px">
							<el-form-item label="采集周期">
								<el-input v-model={formData.value.period} />
							</el-form-item>
							<el-form-item label="采集间隔">
								<el-input v-model={formData.value.param.inter} />
							</el-form-item>
							<el-form-item label="超时时间">
								<el-input v-model={formData.value.param.timeout} />
							</el-form-item>
							<el-form-item label="上报方式">
								<el-select v-model={formData.value.upload.mode}>
									<el-option label="周期上报" value={2} />
									<el-option label="变化上报" value={1} />
								</el-select>
							</el-form-item>
							<el-form-item label="上报周期">
								<el-input v-model={formData.value.upload.period} />
							</el-form-item>
							<el-form-item label="short int字节序">
								<el-input v-model={formData.value.param.bshort} />
							</el-form-item>
							<el-form-item label="int字节序">
								<el-input v-model={formData.value.param.bint} />
							</el-form-item>
							<el-form-item label="float字节序">
								<el-input v-model={formData.value.param.bfloat} />
							</el-form-item>
						</el-form>
					</div>
				</div>
			);
		};
	}
});
